<template>
  <view v-if="userInfo.id">
    <view v-show="loading" class="card">
      <nut-skeleton :width="`${statusBar.screenWidth - 120}px`" row="2" :title="false" animated avatar></nut-skeleton>
      <view style="margin-top: 100rpx;">
        <nut-skeleton :width="`${statusBar.screenWidth - 50}px`" row="3" animated></nut-skeleton>
      </view>
      <view style="margin-top: 100rpx;">
        <nut-skeleton :width="`${statusBar.screenWidth - 50}px`" row="3" animated></nut-skeleton>
      </view>
      <view style="margin-top: 100rpx;">
        <nut-skeleton :width="`${statusBar.screenWidth - 50}px`" row="3" animated></nut-skeleton>
      </view>
    </view>
    <view v-show="!loading">
      <view class="rect">
        <nut-space :gutter="12" align="center">
          <nut-avatar
              size="50"
              shape="round">
            <IconFont size="24" name="my" />
          </nut-avatar>
          <nut-space justify="center" direction="vertical">
            <view class="nickName">微信用户</view>
            <view @click="copyUserId" class="userid">
              <text style="margin-right: 6px;">{{ userInfo.userCode }}</text>
              <image style="width: 22rpx;height: 22rpx" src="../../images/copy.png" />
            </view>
          </nut-space>
        </nut-space>
      </view>
      <view style="height: 20rpx;background-color: #f7f8fa;"></view>
      <view class="sticky">
        <view class="rect title">我的权益</view>
        <nut-tabs
            align="left"
            title-gutter="16"
            background="#fff"
            @change="statusChange"
            v-model="activeType">
          <nut-tab-pane title="使用中" pane-key="1" />
<!--          <nut-tab-pane title="已用完" pane-key="2" />-->
<!--          <nut-tab-pane title="已过期" pane-key="3" />-->
        </nut-tabs>
      </view>
      <view class="rect list">
        <view v-for="item in list"
              @click="toDetail(item)"
              :key="item.id" class="list-item" :class="{'list-item-primary':item.status === '使用中'}">
          <view class="list-item-title" style="display: flex;align-items: center;justify-content: space-between">
            <view>{{ item.packageName }}</view>
            <image style="width: 60rpx;height: 60rpx" src="../../images/tag.png" />
          </view>
          <view class="list-item-time">
            <view v-if="activeType != 3">过期时间：{{ item.expireTime }}</view>
            <view v-if="activeType == 3">{{ item.status }}</view>
            <view>
              <image v-if="item.status === '使用中'" style="width: 24rpx;height: 24rpx" src="../../images/rect-right-white.png" />
              <image v-else style="width: 24rpx;height: 24rpx" src="../../images/rect-right.png" />
            </view>
          </view>
        </view>
      </view>
      <view style="text-align: center;font-size: 28rpx;color:#999">没有更多了～</view>
    </view>
  </view>
  <view class="loginBox" v-else>
    <nut-button
        open-type="getUserInfo"
        @click="login" type="primary">
      微信一键登录
    </nut-button>
  </view>
</template>

<script setup>
import { ref } from "vue";
import Taro, { useReady, useLoad, useReachBottom, usePullDownRefresh } from '@tarojs/taro';
import {IconFont} from "@nutui/icons-vue-taro";
import request from "../../utils/request";

const statusBar = Taro.getSystemInfoSync();
const userInfo = ref({});
const copyUserId = () => {
  Taro.setClipboardData({
    data:userInfo.value.userCode
  })
}
const loading = ref(true)
const login = async () => {
  const info = await Taro.getUserProfile({
    desc:"完善会员信息"
  })
  await Taro.showLoading({
    mask:true
  })
  const { nickName, avatarUrl } = info.userInfo;
  const { code } = await Taro.login();
  const res = await request.post("/app-api/databoard/mini/miniLogin",{
     code, type:"xm"
  })
  Taro.hideLoading();
  Taro.setStorageSync("userInfo",res);
  userInfo.value = res;
  await Taro.showToast({
    title: "登录成功",
    icon: "none"
  })
  await getList()
}
const activeType = ref(1);
const list = ref([]);
const total = ref(0);
const page = ref(1);
const getList = async () => {
  await Taro.showLoading({
    mask: true
  })
  const result = await request.get("/app-api/databoard/member-packages/list",{
    userCode: userInfo.value.userCode,
    ditchId: 99,
    status: activeType.value,
    pageNo: page.value
  })
  console.log(result)
  list.value = list.value.concat(result.list);
  total.value = result.total;
  Taro.hideLoading();
  Taro.stopPullDownRefresh();
}
const statusChange = () => {
  list.value = [];
  page.value = 1;
  getList();
}
const toDetail = (item) => {
  Taro.navigateTo({
    url:`/pages/detail/detail?packageId=${item.packageId}`
  })
}
usePullDownRefresh(() => {
  statusChange();
})
useReachBottom(() => {
  if (list.value.length < total.value){
    total.value++;
    getList();
  }
})
useLoad(() => {
  userInfo.value = Taro.getStorageSync("userInfo");
  console.log(userInfo.value)
  if (userInfo.value){
    getList()
  }
})
useReady(() => {
  // setTimeout(() => {
    loading.value = false;
  // },200)
})

</script>

<style>
.loginBox{
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
}
.nut-tabs .nut-tabs__titles
.nut-tabs__titles-item.active{
  color: #FF5701;
}
.list-item+.list-item{
  margin-top:26rpx;
}
.list-item{
  height: 220rpx;
  background: linear-gradient( 180deg, #CECECE 0%, #FDFDFD 100%);
  border-radius: 20rpx;
  border: 2rpx solid #e3e4e5;
  padding: 26rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.list-item-time{
  display: flex;
  justify-content: space-between;
}
.list-item-time{
  color: #5a5a5a;
  font-size: 28rpx;
}
.list-item-primary>.list-item-time,
.list-item-primary>.list-item-title{
  color: #fff;
}
.list-item-primary{
  background: linear-gradient( 180deg, #FF5701 0%, #FCBFA0 100%);
  border: 2rpx solid #E2E2E2;
}
.title{
  color: #333;
  font-size: 30rpx;
  padding-bottom: 16rpx;
}
.nickName{
  color: #333;
  font-size: 28rpx;
}
.userid{
  color: #777;
  font-size: 26rpx;
  display: flex;
  align-items: center;
}
.nut-tab-pane {
  padding: 0;
}
.cell{
  width: calc(100% - 60rpx);
  margin-left: 30rpx;
  margin-right: 30rpx;
}
</style>